<template>
  <div class="components">
    <p><span class="num">{{num}} </span> 个按钮是同一个组件</p>
    <mbtn btnName="点我弹窗" btnType="middle" @onsubmitSub='showalert'></mbtn>
    <!-- 不推荐，点到padding也会生效 -->
    <mbtn btnName="点我弹窗" btnType="big" @click.native='showalert'></mbtn>
    <mbtn :btnName="btnname" btnType="middle" @onsubmitSub='showdrop'>
      <transition name="drop" slot="drop">
        <drop v-if="dropshow" @oncl='cl'></drop>
      </transition>
    </mbtn>
    <alert title="曹勇是sb" content="曹勇是sb曹勇是sb曹勇是sb曹勇是sb曹勇是sb曹勇" btnName="是的" btnName2="不是" @onconfirm='confirm' @oncancel='cancel' v-if="alertshow1"></alert>
    <alert title="恭喜！" content="回答正确！！！" btnName="好的" @onconfirm='confirm2' v-if="alertshow2"></alert>
    <alert title="警告！！！" content="点不动了哇？？？你以为你点不是就没事了？？？" btnName="好吧！是傻逼" @onconfirm='confirm3' v-if="alertshow3"></alert>
    <div class="bottombtn">
      <mbtn btnName="返回上一页" btnType="big" @onsubmitSub='goback'></mbtn>
    </div>
  </div>
</template>

<script>
  import alert from "../components/Bigalert";
  import mbtn from "../components/mBtn";
  import drop from "../components/dropList";
  export default {
    name: "components",
    data() {
      return {
        alertshow1: false,
        alertshow2: false,
        alertshow3: false,
        stutes: true, //控制是否允许点击按钮
        dropshow: false, //控制下拉是否显示
        btnname: '点我弹下拉',
        num:0
      };
    },
    mounted(){
      this.$children.forEach(e=>{
        if(e.$el.id === 'mBtn'){
          this.num++;
        }
      })
    },
    methods: {
      //点击下拉菜单
      cl(e) {
        this.btnname = e == '恢复默认' ? '点我弹下拉' : e;
        this.dropshow = false;
      },
      //点击显示下拉按钮
      showdrop() {
        this.dropshow = this.dropshow ? false : true;
      },
      confirm3() {
        this.alertshow3 = false;
        this.stutes = true;
      },
      showalert() {
        if (this.stutes) {
          this.alertshow1 = true;
        } else {
          return;
        }
      },
      confirm() {
        this.alertshow1 = false;
        this.alertshow2 = true;
      },
      cancel() {
        this.alertshow1 = false;
        this.stutes = false;
        setTimeout(() => {
          this.alertshow3 = true;
        }, 3000);
      },
      confirm2() {
        this.alertshow2 = false;
      },
      goback() {
        if (this.stutes) {
          this.$router.go(-1);
        } else {
          return;
        }
      }
    },
    components: {
      alert,
      mbtn,
      drop
    }
  };
</script>

<style scoped lang="scss">
  @import "../styles/common.scss";
  .components {
    >p:first-child {
      font-size: px2rem(32);
      text-align: center;
    }
    .bottombtn {
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
  .drop-enter,
  .drop-leave-to {
    opacity: 0;
  }
  .drop-enter-active,
  .drop-leave-active {
    transition: all .3s linear;
  }
  .drop-enter-to,
  .drop-leave {
    opacity: 1;
  }
  .num{
    display: inline-block;
    font-size: px2rem(50);
    font-weight: bold;
    color: #2196e6;
    transform: translateY(px2rem(6));
  }
</style>
